<template>
  <view class="filter-bar">
    <view class="filter-section">
      <view class="section-title">剧情</view>
      <scroll-view class="filter-scroll" scroll-x>
        <view class="filter-list">
          <view :class="['filter-text', activeFilters.plot === '全部' ? 'active' : '']"
            @click="activeFilters.plot = '全部'">全部</view>
          <view :class="['filter-text', activeFilters.plot === item ? 'active' : '']"
            v-for="item in filters.plot" :key="item"
            @click="activeFilters.plot = item">{{ item }}</view>
        </view>
      </scroll-view>
    </view>

    <view class="filter-section">
      <view class="section-title">地区</view>
      <scroll-view class="filter-scroll" scroll-x>
        <view class="filter-list">
          <view :class="['filter-text', activeFilters.region === '全部' ? 'active' : '']"
            @click="activeFilters.region = '全部'">全部</view>
          <view :class="['filter-text', activeFilters.region === item ? 'active' : '']"
            v-for="item in filters.region" :key="item"
            @click="activeFilters.region = item">{{ item }}</view>
        </view>
      </scroll-view>
    </view>

    <view class="filter-section">
      <view class="section-title">语言</view>
      <scroll-view class="filter-scroll" scroll-x>
        <view class="filter-list">
          <view :class="['filter-text', activeFilters.language === '全部' ? 'active' : '']"
            @click="activeFilters.language = '全部'">全部</view>
          <view :class="['filter-text', activeFilters.language === item ? 'active' : '']"
            v-for="item in filters.language" :key="item"
            @click="activeFilters.language = item">{{ item }}</view>
        </view>
      </scroll-view>
    </view>

    <view class="filter-section">
      <view class="section-title">年份</view>
      <scroll-view class="filter-scroll" scroll-x>
        <view class="filter-list">
          <view :class="['filter-text', activeFilters.year === '全部' ? 'active' : '']"
            @click="activeFilters.year = '全部'">全部</view>
          <view :class="['filter-text', activeFilters.year === item ? 'active' : '']"
            v-for="item in filters.year" :key="item"
            @click="activeFilters.year = item">{{ item }}</view>
        </view>
      </scroll-view>
    </view>

    <view class="filter-section">
      <view class="section-title">排序</view>
      <scroll-view class="filter-scroll" scroll-x>
        <view class="filter-list">
          <view :class="['filter-text', activeFilters.sort === item ? 'active' : '']"
            v-for="item in filters.sort" :key="item"
            @click="activeFilters.sort = item">{{ item }}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 筛选选项数据
const filters = {
  plot: ['动作', '喜剧', '爱情', '科幻', '恐怖', '剧情'],
  region: ['大陆', '香港', '台湾', '美国', '法国', '英国'],
  language: ['国语', '英语', '粤语', '闽南语', '韩语', '日语'],
  year: ['2024', '2023', '2022', '2021', '2020', '2019'],
  sort: ['时间排序', '人气排序', '评分排序']
};

// 当前选中的筛选项
const activeFilters = ref({
  plot: '全部',
  region: '全部',
  language: '全部',
  year: '全部',
  sort: '时间排序'
});
</script>

<style lang="scss">
.filter-bar {
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
}

.filter-section {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  width: 100%;
  .section-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    padding-left: 10rpx;
    width: 90rpx;
  }

  .filter-scroll {
    width: calc(100% - 90rpx);
    white-space: nowrap;
  }

  .filter-list {
    display: flex;
    gap: 20rpx;
    padding: 0 10rpx;
    width: calc(100% - 90rpx);
    padding: 6rpx 0;
  }

  .filter-text {
    font-size: 26rpx;
    color: #666;
    padding: 8rpx 24rpx;
    border-radius: 30rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    &.active {
      color: #ff6b81;
      background-color: #fff5f6;
    }
  }
}
</style>